import React from 'react';
import { text } from '../../recoils/atoms/index';
import { useRecoilState } from "recoil";

function ComponentASetState () {

    const [texts, setTexts] = useRecoilState(text);
    console.log('--useRecoilState in recoil--')

    return (<div className="form-group border">
        <h3>useRecoilState in recoil</h3>
        <div className="form-group">
            <label htmlFor="span">useRecoilState: </label>
            <input type="text" onChange={event => setTexts(event.target.value)}/>
            <p className="text-primary">{texts}</p>
        </div>
    </div>)
}

export default React.memo(ComponentASetState);